<template>
    <view class="details-container">
      <!-- 标题栏 -->
      <view class="details-header">详情</view>
  
      <!-- 维修信息 -->
      <view class="section">
        <view class="section-title">维修信息</view>
        <view class="info-row"><text class="label">维修单号：</text><text>{{ detail.id }}</text></view>
        <view class="info-row"><text class="label">车主姓名：</text><text>{{ detail.owner }}</text></view>
        <view class="info-row">
          <text class="label">联系方式：</text>
          <text>{{ detail.phone }}</text>
          <uni-icons type="phone" size="20" color="#4caf50" class="icon-btn" @click="callPhone(detail.phone)" />
        </view>
        <view class="info-row">
          <text class="label">维修方式：</text><text>{{ detail.type }}</text>
        </view>
        <view class="info-row">
          <text class="label">取车位置：</text>
          <text>{{ detail.address }}</text>
          <uni-icons type="location-filled" size="20" color="#2979ff" class="icon-btn" @click="openMap(detail.address)" />
        </view>
        <view class="info-row"><text class="label">预约日期：</text><text>{{ detail.reserveDate }}</text></view>
        <view class="info-row"><text class="label">提交日期：</text><text>{{ detail.submitDate }}</text></view>
      </view>
  
      <!-- 车辆信息 -->
      <view class="section">
        <view class="section-title">车辆信息</view>
        <view class="info-row"><text class="label">车辆类型：</text><text>{{ detail.carType }}</text></view>
        <view class="info-row"><text class="label">车牌号：</text><text>{{ detail.carNo }}</text></view>
        <view class="info-row"><text class="label">整车照片：</text></view>
        <image :src="detail.carImg" class="car-img" mode="aspectFill" />
        <view class="info-row"><text class="label">维修部位照片：</text></view>
        <view class="repair-img-list">
          <image v-for="(img, idx) in detail.repairImgs" :key="idx" :src="img" class="repair-img" mode="aspectFill" />
        </view>
      </view>
  
      <!-- 确认到场按钮 -->
      <button class="confirm-btn" @click="confirmArrive">确认到场</button>
    </view>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import orderApi from '@/api/order'

  const detail = ref({
    id: '',
    owner: '',
    phone: '',
    type: '',
    address: '',
    reserveDate: '',
    submitDate: '',
    carType: '',
    carNo: '',
    carImg: '',
    repairImgs: []
  })

  onLoad(async (options) => {
    const id = options.id
    try {
      const res = await orderApi.getRepairDetail(id)
      if (res.code === 200 && res.data) {
        const d = res.data
        detail.value = {
          id: d.id,
          owner: d.customerName,
          phone: d.phoneNumber,
          type: d.type === '0' ? '到店维修' : '上门取车',
          address: d.pickupLocation,
          reserveDate: d.reservationTime,
          submitDate: d.submitTime,
          carType: ['大客车', '小轿车', '货车', 'SUV'][Number(d.carTypeId)] || '',
          carNo: d.licensePlate,
          carImg: d.vehiclePhotos ? d.vehiclePhotos.split(',')[0] : '',
          repairImgs: d.repairPhotos ? d.repairPhotos.split(',') : []
        }
      } else {
        uni.showToast({ title: res.msg || '获取详情失败', icon: 'none' })
      }
    } catch (e) {
      uni.showToast({ title: '网络错误', icon: 'none' })
    }
  })

  function callPhone(phone) {
    uni.makePhoneCall({ phoneNumber: phone })
  }
  function openMap(address) {
    // 这里只做演示，实际可用地理编码API获取经纬度
    uni.showToast({ title: '打开地图：' + address, icon: 'none' })
  }
  function confirmArrive() {
    uni.showToast({ title: '已确认到场', icon: 'success' })
  }
  </script>
  
  <style scoped>
  .details-container {
    background: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 40rpx;
  }
  .details-header {
    background: #fff;
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    padding: 30rpx 0 20rpx 0;
    border-bottom: 1rpx solid #eee;
    color: #333;
  }
  .section {
    background: #fff;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 24rpx 20rpx 20rpx 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
  }
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #222;
    margin-bottom: 18rpx;
  }
  .info-row {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
  }
  .label {
    font-weight: bold;
    min-width: 140rpx;
    color: #222;
  }
  .icon-btn {
    margin-left: 10rpx;
  }
  .car-img {
    width: 100%;
    height: 160rpx;
    border-radius: 10rpx;
    margin-bottom: 10rpx;
    object-fit: cover;
  }
  .repair-img-list {
    display: flex;
    gap: 10rpx;
    margin-bottom: 10rpx;
  }
  .repair-img {
    width: 120rpx;
    height: 90rpx;
    border-radius: 8rpx;
    object-fit: cover;
  }
  .confirm-btn {
    width: 90%;
    margin: 40rpx 5% 0 5%;
    background: #2979ff;
    color: #fff;
    font-size: 32rpx;
    border-radius: 12rpx;
    padding: 18rpx 0;
  }
  </style>
  